<template>
	<view class="add-items">
		<view v-for="(item,index) in itemsList" :key="index" class="ai-box">
			<u-form-item label="内容" prop="step.step">
				<u--textarea
					v-model="item.step"
					type="textarea"
					border="none"
					placeholder="请输入步骤具体内容"
					count
				></u--textarea>
			</u-form-item>
			<view class="ai-box-index">{{ index + 1 }}</view>
			<view class="ai-box-delete" @click="deleteItem(item)">
				<u-icon name="trash-fill" color="#fa3534"></u-icon>
			</view>
		</view>
		<view class="add-btn">
			<u-button type="primary" text="添加" icon='plus' plain @click="plus"></u-button>
		</view>
		<u-modal :show="show" :title="title" :content='content' showCancelButton @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import { v4 as uuidv4 } from 'uuid'
	import CommonMixin from './common.js'
	export default {
		mixins: [CommonMixin],
		data() {
			return {
				itemsList_old: [{
					uuid: uuidv4(),
					step: ''
				}],
				show:false,
				title:'提示',
				content:'是否确认删除？',
				curOptItem: {}
			}
		},
		methods: {
			plus() {
				this.itemsList.push({
					uuid: uuidv4(),
					step: ''
				})
			},
			deleteItem(item) {
				this.show = true
				this.curOptItem = item
			},
			confirm() {
				this.itemsList = this.itemsList.filter(i => {
					return i.uuid !== this.curOptItem.uuid
				})
				this.show = false
			},
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.add-items{
		width: calc(100vw - 168rpx);
		.ai-box{
			border: 1px solid #f1f2f3;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			&-index, &-delete{
				position: absolute;
				top: -10rpx;
				left: -10rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #f1f2f3;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&-index{
				color: #999;
			}
			&-delete{
				left: unset!important;
				right: -10rpx;
				top: -18rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
			}
		}
		.add-btn{
			margin-top: 20rpx;
		}
	}
</style>